<template>
    <div>
        <Modal v-model="deleteModal" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <icon type="information-circled"></icon>
                <span>删除确认</span>
            </p>
            <div style="text-align:center">
                <p>点击删除按钮将进行删除，请谨慎操作！</p>
                <p>确认删除?</p>
            </div>
            <div slot="footer">
                <i-button type="error" size="large" long @click="handleConfirmDelete">删除</i-button>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: 'DeleteConfirm',
        data() {
            return {
                deleteModal: false
            };
        },
        props: {
            value: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            handleConfirmDelete() {
                this.$emit('confirm-delete');
            }
        },
        watch: {
            value(newValue, oldValue) {
                this.deleteModal = newValue;
            },
            deleteModal(newValue, oldValue) {
                this.$emit('input', newValue);
            },
        }
    };
</script>

<style scoped>

</style>
